import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
import 'package:x_common_utils/utils/inkWell_util.dart';
import 'package:xinxuan/common/appbar_util.dart';
import 'package:xinxuan/common/network_image_util.dart';
import 'package:xinxuan/common/scroll_configuration_common.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xinxuan/controllers/blind_box/blind_box_detail_page_controller.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:get/get.dart';

class BlindBoxDetailPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return GetBuilder<BlindBoxDetailPageController>(
      init: BlindBoxDetailPageController(),
      builder: (controller) {
        return Scaffold(
          backgroundColor: pageBgColor,
          appBar: AppBarUtil(
            title: '天天盲盒抽奖',
            backgroundColor: pageBgColor,
          ),
          body: ScrollConfigurationCommon(child: ListView(
            children: [
              Stack(
                children: [
                  NetworkImageUtil(
                    url: controller.data.value.data!.thumbnail ?? '', 
                    width: 375.w, 
                    height: 476.h,
                  ),
                  Positioned(
                    bottom: 55.h,
                    left: 0,
                    right: 0,
                    child: InkWellUtil.shakeProofInkWell(Container(
                      alignment: Alignment.center,
                      padding: EdgeInsets.symmetric(horizontal: 35.w),
                      child: Stack(
                        children: [
                          Image.asset(
                            'assets/icons/icon_blindBox_btn.png',
                            width: 304.w,
                            height: 54.w,
                            fit: BoxFit.cover,
                          ),
                          Positioned(
                            child: Container(
                              width: 304.w,
                              height: 54.w,
                              alignment: Alignment.center,
                              child: Text(
                                '${controller.data.value.data!.button}',
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  color: mainTextColor,
                                  fontSize: 18.sp,
                                  fontWeight: FontWeight.bold
                                ),
                              ),
                            )
                          )
                        ],
                      ),
                    ), () {
                      controller.submitOrder();
                    })
                  ),
                  Positioned(
                    bottom: 0,
                    left: 0,
                    child: Container(
                      width: 375.w,
                      padding: EdgeInsets.symmetric(horizontal: 12.w),
                      child: Container(
                        height: 38.h,
                        padding: EdgeInsets.only(top: 12.h),
                        alignment: Alignment.topCenter,
                        decoration: BoxDecoration(
                          color: bgWhiteColor,
                          borderRadius: BorderRadius.vertical(
                            top: Radius.circular(5.w)
                          )
                        ),
                        child: Text(
                          '活动规则',
                          style: TextStyle(
                            color: textBlackColor,
                            fontSize: 16.sp,
                            fontWeight: FontWeight.bold
                          ),
                        ),
                      ),
                    )
                  )
                ],
              ),
              Container(
                width: 375.w,
                padding: EdgeInsets.symmetric(horizontal: 12.w),
                child: Container(
                  padding: EdgeInsets.only(left: 12.w, right: 12.w, bottom: 12.h),
                  decoration: BoxDecoration(
                    color: bgWhiteColor,
                    borderRadius: BorderRadius.vertical(
                      bottom: Radius.circular(5.w)
                    )
                  ),
                  child: HtmlWidget('${controller.data.value.data!.rewardRules}'),
                ),
              )
            ],
          )),
        );
      }
    );
  }

}